@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

// 普通状态
.va-df-radio-wrapper
  height 34px
  display inline-flex
  align-items center
  line-height 0
  &-disabled
    cursor not-allowed



.va-df-radio
  display inline-block
  white-space nowrap
  outline none
  position relative
  line-height 1
  vertical-align middle
  cursor pointer

  &-label
    margin-left 4px
    font-size 14px

  &:hover
    .va-df-radio-inner
      border-color $color-df-input-border-focus


  &-inner
    display inline-block
    width 14px
    height 14px
    position relative
    top 0
    left 0
    background-color #fff
    border 1px solid $color-df-radio-border
    border-radius 50%
    transition all $time-df-transition ease-in-out
    form-control-focus()

    &:after
      position absolute
      width 8px
      height 8px
      left 2px
      top 2px
      border-radius 50%
      display table
      border-top 0
      border-left 0
      content ' '
      background-color $color-primary
      opacity 0
      transition all $time-df-transition ease-in-out
      transform scale(0)



  &-input
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    z-index 1
    opacity 0
    cursor pointer



// 选中状态
.va-df-radio-checked
  .va-df-radio-inner
    border-color $color-primary
    &:after
      opacity 1
      transform scale(1)
      transition all $time-df-transition ease-in-out


  &:hover
    .va-df-radio-inner
      border-color $color-primary




.va-df-radio-disabled
  cursor not-allowed
  .va-df-radio-input
    cursor not-allowed


  &:hover
    .va-df-radio-inner
      border-color $color-df-radio-border


  .va-df-radio-inner
    border-color $color-df-radio-border
    background-color #f3f3f3
    &:after
      background-color #cccccc



  .va-df-radio-disabled + span
    color #ccc
